mixin checkbox(cls, text)
  .checkbox
    label
      input(class=cls type="checkbox")
      != text

mixin select(cls, text)
  div
    label!= text
    select(class=cls)

mixin input(cls, type, text, style)
  div
    label!= text
    input(class=cls type=type style=style)


#settings.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog.modal-lg(role="document")
    .modal-content
      .modal-header
        h5.modal-title
          | Compiler Explorer Settings
        button.close(type="button" data-dismiss="modal" aria-label="Close")
          span(aria-hidden="true") &times;
      .modal-body
        .card
          .card-header
            | These settings control how Compiler Explorer acts for you. They are not
            | preserved as part of shared URLs, and are persisted locally using browser
            | local storage.
            ul.nav.nav-tabs.card-header-tabs(role="tablist")
              li.nav-item(role="presentation"): a.nav-link.active(href="#colouring" role="tab" data-toggle="tab") Colouring
              li.nav-item(role="presentation"): a.nav-link(href="#site-behaviour" role="tab" data-toggle="tab") Site behaviour
              li.nav-item(role="presentation"): a.nav-link(href="#keybindings" role="tab" data-toggle="tab") Keybindings
              li.nav-item(role="presentation"): a.nav-link(href="#editor" role="tab" data-toggle="tab") Editor
              li.nav-item(role="presentation"): a.nav-link(href="#compilation" role="tab" data-toggle="tab") Compilation
          .card-body.tab-content
            #colouring.tab-pane.active.form-group(role="group")
              +select("theme", "Site theme")
              +checkbox("colourise", "Colourise lines to show how the source maps to the output")
              +checkbox("alwaysEnableAllSchemes", "Make all colour schemes available regardless of theme")
              +select("colourScheme", "Line highlighting colour scheme")
            #site-behaviour.tab-pane.form-group(role="group")
              label
                | Default language
                small(style="margin-left: 3px")
                  span.fas.fa-info-circle(title="New editors only (Reset UI to clear yours)" aria-label="New editors only (Reset UI to clear yours)")
              select.defaultLanguage
              +checkbox("keepMultipleTabs", "Keep page status per tab")
              +checkbox("allowStoreCodeDebug", "Allow my source code to be temporarily stored for diagnostic purposes in the event of an error")
              +checkbox("newEditorLastLang", "Use last selected language when opening new Editors")
              +checkbox("enableCommunityAds", "Show community events")
            #keybindings.tab-pane.form-group(role="group")
              +checkbox("useVim", "Vim editor mode")
              .the-save-option-to-auto-share
                label
                  kbd Ctrl
                  | +
                  kbd S
                  | &nbsp;behaviour
                select.enableCtrlS
              .checkbox.the-save-option-to-tree-save
                label
                  input.enableCtrlStree(type="checkbox")
                  | Make
                  kbd Ctrl
                  | +
                  kbd S
                  | &nbsp;include and save the file to a Tree if that's added to the UI
              .checkbox.the-popup-dialog-box-option
                label
                  input.enableSharingPopover(type="checkbox")
                  | Pop up a dialog box when
                  kbd Ctrl
                  | +
                  kbd S
                  | &nbsp; is set to create a short link.
            #editor.tab-pane.form-group(role="group")
              +input("editorsFFont", "text", "Desired Font Family in editors", "width:100%")
              +select("defaultFontScale", "Default font scale")
              +checkbox("editorsFLigatures", "Enable font ligatures")
              +checkbox("autoCloseBrackets", "Automatically insert matching brackets and parentheses")
              +checkbox("autoCloseQuotes", "Automatically insert matching quotes")
              +checkbox("autoSurround", "Automatically surround selected text when typing brackets or quotes")
              +checkbox("autoIndent", "Automatically indent code (reload page after changing)")
              +checkbox("hoverShowSource", "Highlight linked code lines on hover")
              +checkbox("indefiniteLineHighlight", "Highlight linked code indefinitely")
              +checkbox("hoverShowAsmDoc", "Show asm description on hover")
              +checkbox("showQuickSuggestions", "Show quick suggestions")
              +checkbox("useCustomContextMenu", "Use custom context menu")
              +checkbox("showMinimap", "Show editor minimap")
              +checkbox("keepSourcesOnLangChange", "Keep editor source on language change")
              +checkbox("useSpaces", "Use spaces for indentation")
              +input("tabWidth", "number", "Tab width")
              +select("formatBase", "Format based on")
              +checkbox("wordWrap", "Enable Word Wrapping")
              +checkbox("enableCodeLens", "Enable CodeLens features (requires refresh to take effect)")
              +checkbox("colouriseBrackets", "Colourise matching bracket pairs")
            #compilation.tab-pane.form-group(role="group")
              div
                +checkbox("compileOnChange", "Compile automatically when source changes")
                +checkbox("autoDelayBeforeCompile", "Use automatic delay before compiling")
                div
                  label Delay before compiling:&nbsp;
                    span.delay-current-value &nbsp;
                  .slider-input
                    b 0.25s
                    input.delay(type="range")
                    b 3s
                +checkbox("formatOnCompile", "Enable formatting on compilation (for supported languages)")
                +checkbox("executorCompileOnChange", "Compile executor automatically when arguments change")
                +checkbox("shakeStatusIconOnWarnings", "Shake the status icon on argument warnings")
      .modal-footer
        button.btn.btn-outline-primary(type="button" data-dismiss="modal") Close
